<template>
	<div class="workOrder zy-content">
		<div class="searchBox search-box-layout">
			<Row :gutter="24">
				<Col span="4">
					<div>
						<p class="label">{{ $t('fault.WorkOrderNumber') }}</p>
						<div class="ipt">
							<Input clearable type="text" v-model="searchParams.workOrderNo" :placeholder="`${$t('common.inputInfo')}`" class="inputBorder"></Input>
						</div>
					</div>
				</Col>
				<Col span="4">
					<div>
						<p class="label">{{ $t('fault.OrderReport') }}</p>
						<div class="ipt">
							<Select v-model="searchParams.maintainWorkOrderStatus" filterable clearable :placeholder="`${$t('common.selectInfo')}`">
								<Option v-for="(item, index) of orderStatusList" :value="item.id" :label="item.name" :key="index"> </Option>
							</Select>
						</div>
					</div>
				</Col>
				<Col span="4">
					<div>
						<p class="label">{{ $t('fault.RepairingMode') }}</p>
						<div class="ipt">
							<Select v-model="searchParams.maintainMode" filterable clearable :placeholder="`${$t('common.selectInfo')}`">
								<Option v-for="(item, index) of maintainModeList" :value="item.id" :label="item.name" :key="index"> </Option>
							</Select>
						</div>
					</div>
				</Col>
				<Col span="4">
					<div>
						<p class="label">{{ $t('故障部件') }}</p>
						<div class="ipt">
							<Select v-model="searchParams.faultPart" filterable clearable :placeholder="`${$t('common.selectInfo')}`">
								<Option v-for="(item, index) of faultPartList" :value="item.value" :key="index" :label="item.value" />
							</Select>
						</div>
					</div>
				</Col>
				<Col span="4">
					<div>
						<p class="label">{{ $t('fault.FaultClassification') }}</p>
						<div class="ipt">
							<Select
								v-model="searchParams.faultCategory"
								filterable
								clearable
								@on-open-change="openList"
								@on-query-change="getFaultType"
								:placeholder="`${$t('common.selectInfo')}`"
							>
								<Option v-for="item in faultList" :value="item" :label="item" :key="item"> </Option>
							</Select>
						</div>
					</div>
				</Col>
				<Col span="4">
					<div>
						<p class="label">{{ $t('preliminary.Location') }}</p>
						<div class="ipt">
							<Cascader
								clearable
								:data="orgList"
								transfer
								v-model="searchParams.workShop"
								:placeholder="`${$t('common.selectInfo')}`"
								change-on-select
							></Cascader>
						</div>
					</div>
				</Col>
				<Col span="4">
					<div>
						<p class="label">{{ $t('故障原因') }}</p>
						<div class="ipt">
							<Input clearable type="text" v-model="searchParams.faultReason" :placeholder="`${$t('common.inputInfo')}`" class="inputBorder"></Input>
						</div>
					</div>
				</Col>
				<!-- <Col span="4">
					<div>
						<p class="label">{{ $t('preliminary.Entity') }}</p>
						<div class="ipt">
							<Select v-model="searchParams.companyId" filterable clearable :placeholder="`${$t('common.selectInfo')}`">
								<Option v-for="(item, index) of companyList" :value="item.id" :label="item.name" :key="index"> </Option>
							</Select>
						</div>
					</div>
				</Col> -->
				<Col span="4">
					<div>
						<p class="label">{{ $t('maintenance.EquipmentNo') }}</p>
						<div class="ipt">
							<Input
								clearable
								type="text"
								v-model="searchParams.deviceNo"
								:placeholder="`${$t('common.inputInfo')}`"
								class="inputBorder"
								:maxlength="32"
							></Input>
						</div>
					</div>
				</Col>
				<!-- <Col span="4">
					<div>
						<p class="label">{{ $t('fault.FromAndon') }}</p>
						<div class="ipt">
							<Select v-model="searchParams.workOrderSource" filterable clearable :placeholder="`${$t('common.selectInfo')}`">
								<Option v-for="(item, index) of workOrderSourceList" :value="item.id" :label="item.name" :key="index"> </Option>
							</Select>
						</div>
					</div>
				</Col> -->
				<Col span="4">
					<div>
						<p class="label">{{ $t('fault.ImpactProduction') }}</p>
						<div class="ipt">
							<Select v-model="searchParams.affectProductionFlag" filterable clearable :placeholder="`${$t('common.selectInfo')}`">
								<Option v-for="(item, index) of effects" :value="item.value" :label="item.label" :key="index"> </Option>
							</Select>
						</div>
					</div>
				</Col>
				<Col span="4">
					<div>
						<p class="label">{{ $t('报修时间') }}</p>
						<div class="ipt">
							<DatePicker
								type="datetimerange"
								format="yyyy-MM-dd HH:mm:ss"
								:options="optionsdate"
								:value="searchParams.dateTimeRange"
								@on-change="handleChangeDate"
								:placeholder="`${$t('common.selectInfo')}`"
								placement="bottom-end"
							></DatePicker>
						</div>
					</div>
				</Col>

				<Col span="4">
					<div>
						<p class="label">{{ $t('维修员') }}</p>
						<div class="ipt">
							<Select v-model="searchParams.receiveOrderBy" filterable clearable :placeholder="$t('common.inputInfo')" :remote-method="getRepairList">
								<Option v-for="(item, i) in repairList" :value="item.id" :label="item.realname + '-' + item.empno" :key="i"> </Option>
							</Select>
						</div>
					</div>
				</Col>
				<Col span="4">
					<div>
						<p class="label">{{ $t('报修人') }}</p>
						<div class="ipt">
							<Select v-model="searchParams.maintainApplyBy" filterable clearable :placeholder="$t('common.inputInfo')" :remote-method="getMainList">
								<Option v-for="(item, i) in mainList" :value="item.id" :label="item.realname + '-' + item.empno" :key="i"> </Option>
							</Select>
						</div>
					</div>
				</Col>
				<Col span="4">
					<div>
						<p class="label hide-label">--</p>
						<div class="ipt">
							<Button class="search-btn" type="primary" @click="changeNum()">{{ $t('common.Query') }}</Button>
							<Button class="reset-btn" @click="reset()">{{ $t('common.reset') }} </Button>
						</div>
					</div>
				</Col>
			</Row>
		</div>

		<div class="list-layout mt16">
			<div class="btns clear">
				<span class="title">{{ $t('common.listInformation') }}</span>
				<Button @click="exportTemplateClick">{{ $t('common.batchExport') }}</Button>
				<Button @click="getTableColumns(columns)">{{ handleContextMenuStatus ? $t('显示操作栏') : $t('隐藏操作栏') }}</Button>
			</div>
			<div class="tableContent">
				<Table
					class="resizable-table"
					border
					@on-column-width-resize="onColumnWidthResize"
					:columns="columnsList"
					:data="dataSource"
					@on-selection-change="onSelectChange"
				>
					<!-- <template slot-scope="{ row }" slot="action">
						<span v-if="row.workOrderStatus === 1" v-has="'equipMaintenanceReportDistribution'" class="operationBtn" @click="allot(row)"
							><i class="iconfont zy-common-fenpei"></i>{{ $t('maintenance.Distribution') }}</span
						>
						<span class="operationBtn" v-has="'equipMaintenanceReportDetail'" @click="showDetail(row)"
							><i class="iconfont zy-common-chakan"></i>{{ $t('common.Detail') }}</span
						>
						<span class="operationBtn" v-has="'equipMaintenanceReportDelete'" @click="deleteOrder(row)"
							><i class="iconfont zy-common-shanchu"></i>{{ $t('common.Delete') }}</span
						>
					</template> -->
					<template slot-scope="{ row }" slot="affectProductionFlagStr">
						<Tag color="red" v-if="row.affectProductionFlag === 2">{{ row.affectProductionFlagStr }}</Tag>
						<Tag color="volcano" v-else-if="row.affectProductionFlag === 1">{{ row.affectProductionFlagStr }}</Tag>
						<Tag color="blue" v-else>{{ row.affectProductionFlagStr }}</Tag>
					</template>
				</Table>
			</div>
			<div class="pageWrap mt16">
				<pageLeftTitle :total="total" :selected="ids.length" />
				<Page
					:total="total"
					:page-size="pageSize"
					:page-size-opts="$variable.pageSizes"
					:current="pageNum"
					@on-change="changePageNum"
					@on-page-size-change="changePageSize"
					show-sizer
					show-total
				/>
			</div>
		</div>
		<!--选择单个人员-->
		<signle-member-modal ref="signleMemberModal" @handleRefresh="searchList" />
		<!--详情-->
		<!--        <order-detail-modal ref="orderDetailModal" @handleRefresh="searchList"/>-->
	</div>
</template>

<script>
import fileDownload from 'js-file-download';
import recursion from '../../../util/recursion';
// import orderDetailModal from '../workOrderHall/modules/orderDetailModal'
//   import orderAddModal from './modules/orderAddModal'
import SignleMemberModal from '../workOrderHall/modules/signleMemberModal';
import toggleTableOperation from '@/mixins/toggleTableOperation';

export default {
	name: 'statementWorkOrder',
	mixins: [toggleTableOperation],
	components: {
		SignleMemberModal,
	},
	data() {
		return {
			optionsdate: {
				disabledDate(date) {
					return date && date.getTime() > Date.now();
				},
			},
			ids: [],
			searchParams: {},
			total: 0,
			pageNum: 1,
			pageSize: 10,
			pageSizeOption: [10, 20, 30, 100, 200],
			statusList: [
				{ id: 0, name: this.$t('待到货') },
				{ id: 1, name: this.$t('到货中') },
				{ id: 2, name: this.$t('已完成') },
			],
			orderStatusList: [
				{ id: 0, name: this.$t('维修确认') },
				{ id: 1, name: this.$t('待分配') },
				{ id: 8, name: this.$t('升级中') },
				{ id: 5, name: this.$t('维修中') },
				{ id: 6, name: this.$t('待验收') },
				{ id: 7, name: this.$t('已结单') },
				{ id: -1, name: this.$t('已驳回') },
			],
			maintainModeList: [
				{ id: 0, name: this.$t('自行维修') },
				{ id: 1, name: this.$t('保修期内维修') },
				{ id: 2, name: this.$t('委外维修') },
			],
			workOrderSourceList: [
				{ id: 0, name: this.$t('否') },
				{ id: 1, name: this.$t('是') },
			],
			effects: [
				{ label: this.$t('影响生产停机'), value: 2 },
				{ label: this.$t('影响生产未停机'), value: 1 },
				{ label: this.$t('不影响生产'), value: 0 },
			],
			faultPartList: [
				// {id: '0', name: '发动机'},
			],
			faultList: [],
			faultTypeList: [],
			orgList: [],
			columns: [
				{
					key: 'selection',
					type: 'selection',
					width: 60,
					align: 'center',
					fixed: 'left',
				},
				{
					title: '工单状态',
					key: 'maintainWorkOrderStatus',
					align: 'center',
					minWidth: 120,
					resizable: true,
					tooltip: true,
					render: (h, params) => {
						let color = '#999999';
						if (params.row.maintainWorkOrderStatus === -1) {
							color = '#f24b67';
						} else if (params.row.maintainWorkOrderStatus === 7) {
							color = '#187bdb';
						} else if (params.row.maintainWorkOrderStatus === 6) {
							color = '#36ce53';
						} else if (params.row.maintainWorkOrderStatus === 5) {
							color = '#ecbc18';
						}
						return h(
							'div',
							{
								class: 'box',
								style: {
									padding: '5px 0',
									borderRadius: '20px',
									border: `1px solid ${color}`,
									color: color,
								},
							},
							this.orderStatusList.find((item) => item.id == params.row.maintainWorkOrderStatus).name
						);
					},
				},
				{
					title: '工单号',
					key: 'workOrderNo',
					align: 'center',
					minWidth: 180,
					resizable: true,
					tooltip: true,
				},
				{
					title: '是否影响生产',
					key: 'affectProductionFlag',
					align: 'center',
					minWidth: 130,
					resizable: true,
					tooltip: true,
					render: (h, params) => {
						return h('div', this.effects.find((item) => item.value === params.row.affectProductionFlag).label);
					},
				},
				{
					title: `${this.$t('maintenance.EquipmentName')}`,
					key: 'deviceName',
					align: 'center',
					minWidth: 130,
					resizable: true,
					tooltip: true,
				},
				{
					title: `${this.$t('maintenance.EquipmentNo')}`,
					key: 'deviceNo',
					align: 'center',
					minWidth: 130,
					resizable: true,
					tooltip: true,
				},
				{
					title: `${this.$t('equipCheck.SerialNo')}`,
					key: 'deviceMId',
					align: 'center',
					minWidth: 150,
					resizable: true,
					tooltip: true,
				},
				{
					title: `${this.$t('设备等级')}`,
					key: 'deviceGrade',
					align: 'center',
					minWidth: 100,
					resizable: true,
					tooltip: true,
				},
				{
					title: '安装位置',
					key: 'functionalLocationName',
					align: 'center',
					minWidth: 240,
					tooltip: true,
					resizable: true,
				},
				{
					title: '报修人',
					key: 'maintainApply',
					align: 'center',
					minWidth: 200,
					resizable: true,
					tooltip: true,
				},
				{
					title: '维修员',
					key: 'receiveOrder',
					align: 'center',
					minWidth: 200,
					resizable: true,
					tooltip: true,
				},
				{
					title: '故障时间',
					key: 'faultTime',
					align: 'center',
					minWidth: 200,
					resizable: true,
					tooltip: true,
				},
				{
					title: '报修时间',
					key: 'maintainApplyTime',
					align: 'center',
					minWidth: 200,
					resizable: true,
					tooltip: true,
				},
				{
					title: '生产主管确认时间',
					key: 'managerConfirmTime',
					align: 'center',
					minWidth: 200,
					resizable: true,
					tooltip: true,
				},
				{
					title: '接单时间',
					key: 'receiveOrderTime',
					align: 'center',
					minWidth: 200,
					resizable: true,
					tooltip: true,
				},
				{
					title: '故障现象',
					key: 'faultMessage',
					align: 'center',
					minWidth: 200,
					resizable: true,
					tooltip: true,
				},
				{
					title: '故障部件',
					key: 'faultPart',
					align: 'center',
					minWidth: 200,
					resizable: true,
					tooltip: true,
				},
				{
					title: '故障分类',
					key: 'faultCategory',
					align: 'center',
					minWidth: 200,
					resizable: true,
					tooltip: true,
				},
				{
					title: '故障原因',
					key: 'faultReason',
					align: 'center',
					minWidth: 250,
					tooltip: true,
					resizable: true,
				},
				{
					title: '解决办法和预防措施',
					key: 'solution',
					align: 'center',
					minWidth: 260,
					tooltip: true,
					resizable: true,
				},
				{
					title: `${this.$t('fault.FaultClassification')}`,
					key: 'faultCategory',
					align: 'center',
					minWidth: 120,
					resizable: true,
					tooltip: true,
				},
				{
					title: `${this.$t('fault.RepairingMode')}`,
					key: 'maintainMode',
					align: 'center',
					minWidth: 140,
					resizable: true,
					tooltip: true,
					render: (h, params) => {
						return h('div', params.row.maintainMode!==null?this.maintainModeList.find((item) => item.id === params.row.maintainMode).name:' ');
					},
				},
				{
					title: `${this.$t('fault.CompletionTime')}`,
					key: 'maintainEndTime',
					align: 'center',
					minWidth: 200,
					resizable: true,
					tooltip: true,
				},
				{
					title: `${this.$t('验收时间')}`,
					key: 'maintainCheckTime',
					align: 'center',
					minWidth: 200,
					resizable: true,
					tooltip: true,
				},
				{
					title: `${this.$t('响应时长')}(min)`,
					key: 'responseDuration',
					align: 'center',
					minWidth: 250,
					resizable: true,
					tooltip: true,
				},
				{
					title: `${this.$t('维修时长')}(min)`,
					key: 'maintainDuration',
					align: 'center',
					minWidth: 200,
					resizable: true,
					tooltip: true,
				},
				// {
				// 	title: `${this.$t('common.operation')}`,
				// 	slot: 'action',
				// 	minWidth: this.util.autoWidth(270, 300),
				// 	align: 'center',
				// 	fixed: 'right',
				// },
			],
			dataSource: [],
			companyList: [], // 所属公司
			dateTimeRange: [],
			repairList: [],
			mainList: [],
		};
	},
	created() {
		this.getTableColumnsWidth(this.columns);
		this.changeNum();
		this.getCompany();
		this.getFaultPosition();
		this.getFaultTypeList();
		this.getOrgList();
	},
	methods: {
		close() {
			this.$router.go(-1);
		},
		getFaultPosition() {
			this.axios({
				method: 'get',
				url: '/dms/faultCategory/dictList?name=部件',
			}).then((res) => {
				if (res.code === 200) {
					this.faultPartList = res.data || [];
				} else {
					this.$Message.warning({ content: res.msg, duration: 6, closable: true });
				}
			});
		},
		getMainList(query) {
			if (query)
				this.axios({
					method: 'post',
					url: '/dms/workOrder/getUsers',
					data: { empno: query },
				}).then((res) => {
					if (res.code === 200) {
						this.mainList = res.data;
					} else {
						this.$Message.warning({ content: res.msg, duration: 6, closable: true });
					}
				});
			else this.mainList = [];
		},
		getRepairList(query) {
			if (query)
				this.axios({
					method: 'post',
					url: '/dms/workOrder/getUsers',
					data: { empno: query },
				}).then((res) => {
					if (res.code === 200) {
						this.repairList = res.data;
					} else {
						this.$Message.warning({ content: res.msg, duration: 6, closable: true });
					}
				});
			else this.repairList = [];
		},
		openList(val) {
			if (val && !(this.faultList && this.faultList.length)) {
				this.getFaultType();
			}
		},
		//获取故障数据
		getFaultType(faultName) {
			this.axios({
				method: 'post',
				url: '/dms/faultCategory/selectCategory',
				data: { faultName },
			}).then((res) => {
				if (res.code === 200) {
					this.faultList = res.data;
				} else {
					this.$Message.warning({ content: res.msg, duration: 6, closable: true });
				}
			});
		},
		//获取故障类型数据
		getFaultTypeList() {
			this.axios({
				method: 'get',
				url: '/dms/faultCategory/dictList?name=故障分类',
			}).then((res) => {
				if (res.code === 200) {
					this.faultTypeList = res.data;
				} else {
					this.$Message.warning({ content: res.msg, duration: 6, closable: true });
				}
			});
		},
		// 获取使用位置
		getOrgList() {
			this.axios({
				method: 'get',
				url: '/basic/organization/findListByToken',
				params: {},
			}).then((res) => {
				if (res.code === 200) {
					const obj = {
						label: 'name',
						value: 'code',
						children: 'children',
					};
					this.orgList = recursion.convertTree(res.data, obj);
				} else {
					this.$Message.warning({ content: res.msg, duration: 6, closable: true });
				}
			});
		},
		getCompany() {
			this.axios({
				method: 'get',
				url: '/basic/company/getCompanyListByUser',
			}).then((res) => {
				if (res.code === 200) {
					this.companyList = res.data;
				}
			});
		},
		//日期
		handleChangeDate(val) {
			this.searchParams.maintainApplyTimeS = val[0];
			this.searchParams.maintainApplyTimeE = val[1];
		},
		// 分配
		allot(row) {
			this.$refs.signleMemberModal.show(row);
		},
		// 详情
		showDetail(row) {
			const userId = localStorage.getItem('ziyunFactoryUserId');
			this.$router.push({
				path: '/fault/statement/workOrderDetail',
				query: {
					id: row.id,
					status: +userId === row.receiveOrderBy ? `${row.workOrderStatus}` : false,
				},
			});
		},
		// 删除
		deleteOrder(row) {
			this.axios({
				method: 'get',
				url: '/dms/statistical/delete',
				params: { workOrderId: row.id },
			}).then((res) => {
				if (res.code === 200) {
					this.$Message.success('删除成功！');
					if (this.ids.includes(row.id)) {
						this.ids = this.ids.filter((v) => v !== row.id);
					}
					this.searchList();
				} else {
					this.$Message.warning({ content: res.msg, duration: 6, closable: true });
				}
			});
		},
		reset() {
			this.searchParams = {};
			this.searchParams.dateTimeRange = [];
			this.changeNum();
		},
		//分页
		changeNum() {
			this.pageNum = 1;
			this.searchList();
		},
		changePageSize(pageSize) {
			this.pageSize = pageSize;
			this.searchList();
		},
		changePageNum(val) {
			this.pageNum = val;
			this.searchList();
		},
		searchList() {
			//查询列表
			let params = {
				pageNum: this.pageNum,
				pageSize: this.pageSize,
				...this.searchParams,
				maintainWorkOrderStatus: this.searchParams.maintainWorkOrderStatus,
				workShop: this.searchParams.workShop && this.searchParams.workShop.at(-1),
			};
			this.axios({
				method: 'post',
				url: '/dms/deviceMaintenanceWorkOrder/maintainReportPage',
				data: params,
			}).then((res) => {
				if (res.code === 200) {
					this.dataSource = res.data.records;
					this.total = res.data.total;
				} else {
					this.$Message.warning({
						content: res.msg,
						duration: 6,
						closable: true,
					});
				}
			});
		},
		onSelectChange(selectionData) {
			this.ids = selectionData.map((v) => v.id);
		},
		//导出
		exportTemplateClick() {
			let params = {
				// pageNum: this.pageNum,
				// pageSize: this.pageSize,
				workOrderIds: this.ids,
				maintainWorkOrderStatus: this.searchParams.maintainWorkOrderStatus,
				maintainMode: this.searchParams.maintainMode,
				faultPart: this.searchParams.faultPart,
				faultCategory: this.searchParams.faultCategory,
				faultTypeId: this.searchParams.faultTypeId,
				deviceNo: this.searchParams.deviceNo,
				companyId: this.searchParams.companyId,
				workShop: this.searchParams.workShop && this.searchParams.workShop.at(-1),
				// workOrderSource: this.searchParams.workOrderSource,
				maintainApplyTimeS: this.searchParams.maintainApplyTimeS,
				maintainApplyTimeE: this.searchParams.maintainApplyTimeE,
			};
			const filName = '工单报表';
			this.axios({
				method: 'post',
				url: '/dms/statistical/maintain/export',
				responseType: 'blob',
				data: params,
			}).then((res) => {
				fileDownload(res, filName + '.xlsx');
			});
		},
	},
};
</script>
